<template>
  <h1>我是Vue3</h1>
  <h2>{{person.name}}</h2>
  <h2>{{person.job.type}}</h2>
  <h2>{{person.job.salary}}</h2>
  <button @click="say">点我修改名字</button>
</template>

<script>
  import { ref, reactive } from 'vue'
  //引用对象
  export default {
    setup() {
      // let name = ref('张三')
      // let age = reactive('18')
      //普通值不能用reactive  对象可以
      // let job = reactive({
      //   type: '前端',
      //   salary: '3k'
      // })
      let person = reactive({
        name: '张三',
        age: '18',
        job: {
          type: '前端',
          salary: '3k'
        }
      })

      function say() {
        person.name = '李四'
        //对象怎么修改响应式数据  用proxy,不用getter和setter
        person.job.type = '外卖员';
        person.job.salary = '5k';
      }

      return {
        person, say
      }
    }
  }
</script>

<style>

</style>